<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<view class="_back">
			<view class="message_Flex">
				<text>注意：学生腾讯会议号的名字需跟平台名字一模一样</text>
				<view class="view">
					<view class="yuan"></view>
					<u--image :showLoading="true" src="../../../static/more.png" width="28rpx"
						height="28rpx"></u--image>
				</view>
			</view>
		</view>
		<view class="UserHeaders">
			<view class="u_flex">
				<u--image :showLoading="true" :src="info.avatar" width="138rpx" height="138rpx" radius="0"
					shape="circle"></u--image>
				<view class="userRight">
					<text class="name">{{ info.username || '' }}</text>
					<view class="view">
						<u--image :showLoading="true" src="../../../static/Mine/phone.png" width="20rpx" height="20rpx"
							radius="0"></u--image>
						<text>{{ info.mobile || '' }}</text>
					</view>
					<text class="level">分组：{{info.course_category_name || ''}}
						<image src="../../../static/gantan.png"
							style="width: 40rpx;height: 40rpx;margin-top: 5rpx;position: absolute;" mode=""
							v-if="info.level_id > 1 && info.is_answer == 0"></image>
						<text style="margin-left:40rpx;" v-if="info.level_id > 1 && info.is_answer == 0"
							@click="linkUrl(`/pages/Questionnaire/Test_questionnaire?title=${info.student_type_id == 1 ? '小学' : info.student_type_id == 2 ? '孩童' : '青少年'}`)">完成英语测试问卷
							。</text>
					</text>
				</view>
			</view>
			<view class="edit_Userinfo" :style="{ background: $store.state.buttonColor }"
				@click="linkUrl(`/pages/Mine/userinfo?type=edit`)">修改资料</view>
		</view>
		<view class="info_Flex">
			<view>
				<text class="num">{{ addinfo.reservation_count || 0 }}</text>
				<text class="title">累计上课次数</text>
			</view>
			<view @click="linkUrl('/pages/Mine/CourseReportLists')">
				<text class="num">{{ addinfo.course_report_count || 0 }}</text>
				<text class="title">课程报告</text>
			</view>
			<view>
				<text class="num">{{ addinfo.comment_count || 0 }}</text>
				<text class="title">累计评价次数</text>
			</view>
		</view>
		<view class="menusBody">
			<view v-for="(item, index) in nav" :key="index" class="ViewFlex"
				:style="{ 'border-bottom': index !== 4 ? '1px solid #F2F2F2' : '1px solid #fff' }"
				@click="linkUrl(item.url)">
				<view class="View">
					<u--image :showLoading="true" :src="item.icon" width="48rpx" height="48rpx" radius="0"></u--image>
					<text>{{ item.name }}</text>
				</view>
				<view class="TimeFlex" v-if="index == 0 && timeDifference">
					<text class="TimeTitle">课程即将开始</text>
					<u-count-down :time="timeDifference" format="HH:mm:ss" autoStart millisecond @change="onChange">
						<view class="time">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.minutes }}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeData.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>
				<view class="TimeFlex" v-if="index == 1 && timeDifferencetwo">
					<text class="TimeTitle">课程即将开始</text>
					<u-count-down :time="timeDifferencetwo" format="HH:mm:ss" autoStart millisecond
						@change="onChangeNew">
						<view class="time">
							<view class="time__custom">
								<text
									class="time__custom__item">{{ timeDataNew.hours>=10?timeDataNew.hours:'0'+timeDataNew.hours}}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeDataNew.minutes }}</text>
							</view>
							<text class="time__doc">:</text>
							<view class="time__custom">
								<text class="time__custom__item">{{ timeDataNew.seconds }}</text>
							</view>
						</view>
					</u-count-down>
				</view>
				<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"
					radius="0"></u--image>
			</view>
		</view>
		<view class="menusBody">
			<view v-for="(item, index) in nav2" :key="index" class="ViewFlex"
				:style="{ 'border-bottom': index !== 2 ? '1px solid #F2F2F2' : '1px solid #fff' }"
				@click="linkUrl(item.url)">
				<view class="View">
					<u--image :showLoading="true" :src="item.icon" width="48rpx" height="48rpx" radius="0"></u--image>
					<text>{{ item.name }}</text>
				</view>
				<u--image :showLoading="true" src="../../../static/more.png" width="28rpx" height="28rpx"
					radius="0"></u--image>
			</view>
		</view>
		<view class="box">
			<u-popup :show="vipIsShow" @close="vipIsShow = false" @open="vipIsShow = true" mode="center" round="20">
				<view class="_popupBody">
					<text class="title">提示</text>
					<text class="tips">{{vipinfo.text || ''}}</text>
					<u-icon size="35" name="close-circle-fill" color="#fff"
						style="margin:0px auto;position:absolute;left:45%;margin-top:200rpx;"
						@click="vipIsShow = false"></u-icon>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
	import {
		userinfo,
		getUserCount,
		getUserLevelEject,
		getHourLog
	} from '../../../api/Mine.js';
	import {
		getJsSdk
	} from '../../../api/Teacher.js';
	import jWeixin from '../../../js_sdk/jweixin-module';
	export default {
		data() {
			return {
				timeData: {},
				nav: [{
					icon: '../../../static/Mine/mine_yuyue.png',
					url: '/pages/Mine/Schedule_courses',
					name: '我的单次预约课程'
				}, 
				// {
				// 	icon: '../../../static/Mine/mine_kec.png',
				// 	url: '/pages/Mine/MyFixedcourses',
				// 	name: '我的固定预约课程'
				// },
				{
					icon: '../../../static/Mine/mine_keqian.png',
					url: '/pages/Mine/MyPreclasspreview',
					name: '我的课前预习'
				}, {
					icon: '../../../static/Mine/mine_dianzan.png',
					url: '/pages/Mine/MyCollectTeacher',
					name: '我的收藏老师'
				}, {
					icon: '../../../static/Mine/mine_lianxilaoshi.png',
					url: '/pages/Tabbar/Teacher/chatList',
					name: '联系老师'
				}],
				nav2: [
				// 	{
				// 	icon: '../../../static/Mine/mine_vip.png',
				// 	url: '/pages/Mine/MyVip',
				// 	name: '我的会员卡'
				// }, 
				// {
				// 	icon: '../../../static/Mine/mine_tguang.png',
				// 	url: '/pages/Mine/MyPromotion/Promotion_Center',
				// 	name: '推广中心'
				// }, 
				{
					icon: '../../../static/Mine/mine_shezhi.png',
					url: '/pages/Mine/setup',
					name: '设置'
				}],
				info: {},
				addinfo: {},
				vipinfo: {},
				vipIsShow: false,
				timeDifference: 0,
				timeDifferencetwo: 0,
				timeDataNew: {}
			};
		},
		onShow() {
			this.userinfo();
			this.getUserCount();
			this.getUserLevelEject();
			this.getHourLogone();
			this.getHourLogtwo();
		},
		onLoad() {
			this.share();
		},
		methods: {
			/**
			@method 分享
			**/
			async share() {
				try {
					var th_is = this;
					const res = await getJsSdk({
						url: '/pages/Tabbar/Mine/Mine'
					});
					jWeixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data["appId"], // 必填，公众号的唯一标识
						timestamp: res.data["timestamp"], // 必填，生成签名的时间戳
						nonceStr: res.data["nonceStr"], // 必填，生成签名的随机串
						signature: res.data["signature"], // 必填，签名
						jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(function() {
						// 分享给朋友
						jWeixin.updateAppMessageShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							type: 'link', // 分享类型,music、video或link，不填默认为link
							success: function() {
								// 分享成功回调
							}
						});
						// 分享到朋友圈
						jWeixin.updateTimelineShareData({
							title: "约课", // 分享标题
							desc: "邀请您参加预约课程", // 分享描述
							link: window.location.href, // 分享链接
							imgUrl: '', // 分享图标
							success: function() {
								// 分享成功回调
							}
						});
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			onChange(e) {
				this.timeData = e
			},
			onChangeNew(e) {
				this.timeDataNew = e
			},
			/**
			@method 查询单次预约课程
			**/
			async getHourLogone() {
				try {
					const res = await getHourLog({
						shop_id: uni.getStorageSync('shop_id') || 1,
						type: 0,
					});
					const currentTimestamp = new Date().getTime();
					let systemInfo = uni.getSystemInfoSync();
					let platform = systemInfo.platform;
					if (platform === 'android') {
						var specifiedTimestamp = new Date(res.data.start_time).getTime();
					} else if (platform === 'ios') {
						var specifiedTimestamp = new Date(res.data.start_time.replaceAll("-", "/")).getTime();
					} else {
						var specifiedTimestamp = new Date(res.data.start_time).getTime();
					}
					this.timeDifference = specifiedTimestamp - currentTimestamp;
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 查询我的固定预约课程
			**/
			async getHourLogtwo() {
				try {
					const res = await getHourLog({
						shop_id: uni.getStorageSync('shop_id') || 1,
						type: 1,
					});
					const currentTimestamp = new Date().getTime();
					let systemInfo = uni.getSystemInfoSync();
					let platform = systemInfo.platform;
					if (platform === 'android') {
						var specifiedTimestamp = new Date(res.data.start_time).getTime();
					} else if (platform === 'ios') {
						var specifiedTimestamp = new Date(res.data.start_time.replaceAll("-", "/")).getTime();
					} else {
						var specifiedTimestamp = new Date(res.data.start_time).getTime();
					}
					this.timeDifferencetwo = specifiedTimestamp - currentTimestamp; // 计算时间差（单位：毫秒）
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
			@method 等级发生改变弹窗
			**/
			async getUserLevelEject() {
				try {
					const res = await getUserLevelEject({
						shop_id: uni.getStorageSync('shop_id') || 1
					});
					if (res.code == 1 || res.code == '1') {
						this.vipinfo = {
							...res.data
						};
						if (JSON.stringify(this.vipinfo) !== '{}') {
							this.vipIsShow = true;
						}
					}
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
				@method 用户统计
				**/
			async getUserCount() {
				try {
					const res = await getUserCount({
						shop_id: uni.getStorageSync('shop_id')
					});
					this.addinfo = {
						...this.addinfo,
						...res.data
					};
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/**
				@method 老师详情
				**/
			async userinfo() {
				try {
					const res = await userinfo();
					this.info = res.data.userinfo;
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			linkUrl(e) {
				uni.navigateTo({
					url: e
				});
			}
		}
	};
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	button::after {
		border: none;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			width: 20px;
			height: 20px;
			background-color: #FFB5B5;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				color: #F1330D;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			color: #F1330D;
			padding: 0px 4px;
		}

		&__item {
			color: #F1330D;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.TimeFlex {
		display: flex;
		align-items: center;

		.TimeTitle {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #333333;
			margin-right: 10rpx;
		}
	}

	._popupBody {
		width: 500rpx;
		height: auto;
		background-color: transparent;
		position: relative;
		padding-bottom: 190rpx;

		.title {
			display: block;
			font-size: 37rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.tips {
			display: block;
			font-size: 26rpx;
			font-weight: 500;
			text-align: center;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}

		.flex {
			width: 40%;
			display: flex;
			align-items: center;
			justify-content: center;
			// border:1px solid red;
			margin: 0px auto;
		}
	}

	.content {
		width: 100%;
		// height: 30vh;
		position: relative;

		/deep/ .u-safe-bottom {
			display: none;
		}

		._back {
			padding-top: 20rpx;
		}

		.message_Flex {
			width: 92%;
			height: auto;
			margin: 0px auto;
			background-image: url('../../../static/Home/gb.png');
			border-radius: 20rpx;
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;
			padding: 0 40rpx;

			text {
				width: 80%;
				font-size: 24rpx;
				color: #333;
				margin: 0px auto;
				display: flex;
				justify-content: center;
			}

			.view {
				display: flex;
				align-items: center;

				.yuan {
					width: 14rpx;
					height: 14rpx;
					background: #2581FF;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
		}

		.UserHeaders {
			width: auto;
			padding: 40rpx 0rpx 40rpx 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.u_flex {
				width: auto;
				display: flex;
				align-items: center;
			}

			.userRight {
				margin-left: 30rpx;

				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #202020;
				}

				.view {
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					text {
						margin-left: 5rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #8e8f8e;
					}
				}

				.level {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #8e8f8e;
				}
			}

			.edit_Userinfo {
				width: 156rpx;
				height: 63rpx;
				padding-left: 10rpx;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				background-color: #277ffe;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				letter-spacing: 2rpx;
			}
		}

		.info_Flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 50rpx 30rpx 50rpx;

			view {
				text {
					display: block;
					text-align: center;
					margin-top: 10rpx;
				}

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #202020;
				}

				.num {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #202020;
				}
			}
		}

		.menusBody {
			width: 85%;
			margin: 0px auto;
			padding: 30rpx 30rpx 0rpx 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			margin-top: 20rpx;

			.ViewFlex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				padding-bottom: 30rpx;

				.View {
					display: flex;
					align-items: center;

					text {
						margin-left: 10rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 26rpx;
						color: #202020;
					}
				}
			}
		}
	}
</style>